<template>
    <transition name="move">
        <div class="food" v-show="showFlag" ref="food">
            <div class="food-content">
                <div class="image-header">
                    <img :src="food.image">
                    <div class="back" @click="hide">
                        <i class="icon-arrow_lift"></i>
                    </div>
                </div>
                <div class="content">
                    <div class="title">{{food.name}}</div>
                    <div class="detail">
                        <span class="sell-count">月售{{food.sellCount}}份</span>
                        <span class="rating" v-show="food.rating">好评率{{food.rating}}%</span>
                    </div>
                    <div class="price">
                        <span class="now">¥{{food.price}}</span>
                        <span class="old" v-show="food.oldPrice">¥{{food.oldPrice}}</span>
                    </div>
                    <div class="cartcontrol-wrapper">
                        <cartcontrol @add="addFood" :food="food"></cartcontrol>
                    </div>
                    <transition name="fade">
                        <div class="buy" @click.stop.prevent="addFirst" v-show="!food.count || food.count === 0">加入购物车</div>
                    </transition>
                </div>
                <split v-show="food.info"></split>
                    <div class="info" v-show="food.info">
                        <div class="title">商品信息</div>
                        <div class="text">{{food.info}}</div>
                    </div>
                <split></split>
                <div class="rating">
                    <div class="title">商品评价</div>
                    <ratingselect @select="selectRating" @toggle="toggleContent" :ratings="food.ratings" :selectType="selectType" :desc="desc" :onlyContent="onlyContent"></ratingselect>
                    <div class="rating-wrapper">
                        <ul v-show="food.ratings && food.ratings.length">
                            <li v-show="needShow(rating.rateType,rating.text)" v-for="(rating,index) in food.ratings" :key="index" class="rating-item border-1px">
                                <div class="user">
                                    <div class="name">{{rating.username}}</div>
                                    <img class="avatar" :src="rating.avatar" width="12" height="12">
                                </div>
                                <div class="time">{{rating.rateTime | formatDate}}</div>
                                <p class="text">
                                    <span :class="{'icon-thumb_down':rating.rateType === 1,'icon-thumb_up':rating.rateType === 0}"></span>{{rating.text}}
                                </p>
                            </li>
                        </ul>
                        <div class="no-rating" v-show="!food.ratings || !food.ratings.length">暂无评价</div>
                    </div>
                </div>
            </div>
        </div>
    </transition>
</template>

<script type="text/ecmascript-6">
import Vue from 'vue';
import {formatDate} from '../../common/js/date.js';
import BScroll from 'better-scroll';
import cartcontrol from '../../components/cartcontrol/cartcontrol';
import ratingselect from '../../components/ratingselect/ratingselect';
import split from '../../components/split/split';
const ALL = 2;

    export default {
        props: {
            food: {
                type: Object
            }
        },
        data () {
            return {
                showFlag: false,
                selectType: ALL,
                desc: {
                    all: '全部',
                    positive: '推荐',
                    negative: '吐槽'
                },
                onlyContent: true
            };
        },
        filters: {
            formatDate (time) {
                let date = new Date(time);
                return formatDate(date, 'yyyy-MM-dd hh:mm');
            }
        },
        methods: {
            show () {
                this.showFlag = true;
                this.selectType = ALL;
                this.onlyContent = true;
                this.$nextTick(() => {
                    if (!this.scroll) {
                        this.scroll = new BScroll(this.$refs.food, {
                            click: true
                        });
                    } else {
                        this.scroll.refresh();
                    }
                });
            },
            hide () {
                this.showFlag = false;
            },
            addFirst (event) {
                if (!event._constructed) {
                    return;
                }
                this.$emit('add', event.target);
                Vue.set(this.food, 'count', 1);
            },
            addFood (target) {
                this.$emit('add', target);
            },
            needShow (type, text) {
                if (this.onlyContent && !text) {
                    return false;
                }
                if (this.selectType === ALL) {
                    return true;
                } else {
                    return type === this.selectType;
                }
            },
            selectRating (type) {
                this.selectType = type;
                this.$nextTick(() => {
                    this.scroll.refresh();
                });
            },
            toggleContent () {
                this.onlyContent = !this.onlyContent;
                this.$nextTick(() => {
                    this.scroll.refresh();
                });
            }
        },
        components: {
            cartcontrol,
            split,
            ratingselect
        }
    };
</script>

<style lang="stylus" rel="stylesheet/stylus">
@import '../../common/stylus/mixin.styl';
    .food
        position :fixed
        top :0
        left :0
        bottom :48px
        width :100%
        z-index :30
        background :#fff
        transform :translate3d(0,0,0)
        &.move-enter-active, &.move-leave-active
            transition :all 0.2s linear
        &.move-enter, &.move-leave-to
            transform :translate3d(100%,0,0)
        .image-header
            position: relative
            width: 100%
            height: 0
            padding-top: 100%
            img
                position: absolute
                top: 0
                left: 0
                width: 100%
                height: 100%
            .back
                position: absolute
                top: 10px
                left: 0
                .icon-arrow_lift
                    display: block
                    padding: 10px
                    font-size: 20px
                    color: #fff
        .content
            position :relative
            width :100%
            height :74px
            padding :18px
            .title
                font-size :14px
                font-weight :700
                color :rgb(7,17,27)
                line-height :14px
            .detail
                display :inline-block
                margin-top :8px
                font-size :10px
                line-height :10px
                color :rgb(147,153,150)
                .sell-count
                    padding-right :12px
            .price
                padding-top :18px
                .now
                    font-size :14px
                    font-weight :700
                    color :rgb(240,20,20)
                    line-height :24px
                    padding-right :12px
                .old
                    font-size :10px
                    font-weight :700
                    color :rgb(147,153,159)
                    line-height :24px
                    text-decoration :line-through
            .cartcontrol-wrapper
                position :absolute
                right :54px
                bottom :12px
                z-index :10
            .buy
                position :absolute
                right :54px
                bottom :18px
                width :74px
                height :12px
                border-radius :12px
                background :rgb(0,160,220)
                color :#fff
                font-size :10px
                line-height :12px
                padding :6px 0
                text-align :center
                z-index:20
                &.fade-enter-active, &.fade-leave-active
                    transition :all 0.2s
        .info
            padding :18px
            .title
                font-size :14px
                font-weight :700
                line-height :14px
                color :#000
            .text
                padding :6px 8px 0 8px
                font-size :12px
                font-weight :200
                color :rgb(77,85,93)
                line-height :24px
        .rating
            .title
                margin-top :18px
                margin-left :18px
                font-size :14px
                font-weight :700
                line-height :14px
                color :#000
            .rating-wrapper
                padding :0 18px
                .rating-item
                    position :relative
                    padding :16px 0
                    border-1px(rgba(7,17,27,0.1))
                    .user
                        position :absolute
                        top :16px
                        right :16px
                        .name
                            display :inline-block
                            font-size :10px
                            color :rgb(147,153,159)
                            line-height :12px
                            padding-right :6px
                        .avatar
                            display :inline-block
                            width :12px
                            height :12px
                            border-radius :50%
                    .time
                        font-size :10px
                        color :rgb(147,153,159)
                        line-height :12px
                        margin-bottom :6px
                    .text
                        font-size :12px
                        line-height :12px
                        color :rgb(7,17,27)
                        .icon-thumb_down
                            color :rgb(147,153,159)
                            margin-right :4px
                        .icon-thumb_up
                            color :rgb(0,160,220)
                            margin-right :4px
            .no-rating
                padding: 16px 0
                font-size: 12px
                color: rgb(147, 153, 159)
</style>
